<div class="editable w-100 h-100 d-flex align-items-center ps-2 pe-0 label-tag-container"
  [nzOverlayClassName]="'custom-shadow'" nz-dropdown
  [nzTrigger]="'click'"
  [nzClickHide]="false"
  [nzDropdownMenu]="descriptionDropdown"
  (nzVisibleChange)="handleVisibleChange($event, element)" #element>
  <ng-container>
    <span [innerHTML]="task.description | nzEllipsis:55:'...'" nz-tooltip [nzTooltipTitle]="descriptionTooltip"></span>
  </ng-container>
</div>

<ng-template #descriptionTooltip>
  <span nz-typography class="text-white" [innerHTML]="task.description"></span>
</ng-template>

<nz-dropdown-menu #descriptionDropdown="nzDropdownMenu">
  <div *ngIf="show" class="bg-white px-0 py-0">
    <nz-form-item class="task-description-editor-list mb-0" nz-row [style.width]="'550px'">
   <nz-form-control class="description-hover position-relative">
     <editor
    class="description-editor-list"
    [class.editing]="isEditing"
    [init]="CONFIG"
    [(ngModel)]="task.description"
    (onBlur)="submit()"
    #descriptionEditor
     ></editor>
   </nz-form-control>
    </nz-form-item>
  </div>
  <div class="bg-white d-flex justify-content-end p-2 border-top">
    <button nz-button nzType="primary" nzSize="small" (click)="submit()">确定</button>
  </div>
</nz-dropdown-menu>
